{% extends 'home/index.html' %}

{% block title %}
<title>我的购物车</title>
{% endblock %}

{% block css %}
<link href="/static/home/css/cartstyle.css" rel="stylesheet" type="text/css" />
<link href="/static/home/css/optstyle.css" rel="stylesheet" type="text/css" />
{% endblock %}






{% block con %}
<!--购物车 -->
<div class="concent">
    <div id="cartTable">
        <div class="cart-table-th">
            <div class="wp">
                <div class="th th-chk">
                    <div id="J_SelectAll1" class="select-all J_SelectAll"></div>
                </div>
                <div class="th th-item">
                    <div class="td-inner">商品信息</div></div>
                <div class="th th-price">
                    <div class="td-inner">单价</div></div>
                <div class="th th-amount">
                    <div class="td-inner">数量</div></div>
                <div class="th th-sum">
                    <div class="td-inner">金额</div></div>
                <div class="th th-op">
                    <div class="td-inner">操作</div></div>
            </div>
        </div>
        <div class="clear"></div>
        <tr class="item-list">
            <div class="bundle  bundle-last ">

                <div class="clear"></div>
                <div class="bundle-main">
                    {% for i in  data %}
                    <ul class="item-content clearfix">
                        <li class="td td-chk">
                            <div class="cart-checkbox ">
                                <input class="check" name="items[]" value="{{ i.id }}" cateid="{{ i.id }}" type="checkbox">
                            </div>
                        </li>
                        <li class="td td-item">
                            <div class="item-pic">
                                <a href="#" target="_blank" data-title="{{ i.goodsid.title }}" class="J_MakePoint" data-point="tbcart.8.12">
                                    <img src="{{ i.goodsid.pic_url }}" class="itempic J_ItemImg" width="80" height="80"></a>
                            </div>
                            <div class="item-info">
                                <div class="item-basic-info">
                                    <a href="#"  title="{{ i.goodsid.title }}" class="item-title J_MakePoint" data-point="tbcart.8.11">
                                    {{ i.goodsid.title }}
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="td td-info">
                            <div class="item-props ">
                               
                            </div>
                        </li>
                        <li class="td td-price">
                            <div class="item-price price-promo-promo">
                                <div class="price-content">
                                   
                                    <div class="price-line">
                                        <em class="J_Price price-now" tabindex="0">
                                            {{ i.goodsid.price}}
                                        </em>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-amount">
                            <div class="amount-wrapper ">
                                <div class="item-amount ">
                                    <div class="sl">
                                        <input class="min am-btn" name="" type="button" value="-" />
                                        <input class="text_box cartgoodsnum" cartid="{{ i.id }}" name="" type="text" value="{{ i.num }}" style="width:30px;" />
                                        <input class="add am-btn" name="" type="button" value="+" />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-sum">
                            <div class="td-inner">
                                <em tabindex="0" class="J_ItemSum number">
                                {% load pagetag %}
                                {% cartmoney i.goodsid.price i.num %}
                                </em>
                            </div>
                        </li>
                        <li class="td td-op">
                            <div class="td-inner">
                                <!-- <a title="移入收藏夹" class="btn-fav" href="#">移入收藏夹</a> -->
                                <a href="javascript:void(0);" cateid="{{ i.id }}" data-point-url="#" class="delete">删除</a>
                            </div>
                        </li>
                    </ul>
                    {% endfor %}
                </div>
            </div>
        </tr>
        
    </div>
    <div class="clear"></div>
    <div class="float-bar-wrapper">
        <div id="J_SelectAll2" class="select-all J_SelectAll">
            <div class="cart-checkbox">
                <input class="check-all check" id="J_SelectAllCbx2" name="select-all" value="true" type="checkbox">
                <label for="J_SelectAllCbx2"></label>
            </div>
            <span>全选</span>
        </div>
        <div class="operations">
            <a href="javascript:void(0)" hidefocus="true" class="deleteAll">删除</a>
            <!-- <a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a> -->
        </div>
        <div class="float-bar-right">
            <div class="amount-sum">
                <span class="txt">已选商品</span>
                <em id="J_SelectedItemsCount">0</em>
                <span class="txt">件</span>
                <div class="arrow-box">
                    <span class="selected-items-arrow"></span>
                    <span class="arrow"></span>
                </div>
            </div>
            <div class="price-sum">
                <span class="txt">合计:</span>
                <strong class="price">¥
                    <em id="J_Total">0.00</em></strong>
            </div>
             <div class="btn-area">
                <a href="javascript:void(0)" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
                    <span>
                        结&nbsp;算
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){

        // 给结算绑定单击事件
        $('#J_Go').click(function(){
            // 通Allgoodsandprice获取商品的购物车id
            var cartids = Allgoodsandprice()
            // 通过列表的长度，判断是否选择了商品
            if(!cartids.length){
                // 没有选择商品
                alert('您还没有选择将要结算的商品，无法进行结算！')
                // 不能继续执行
                return ;
            }
            // 如果选择了商品
            // 把数组转为json格式字符串
            var res = JSON.stringify(cartids);
            // 跳转到确认订单页面
            location.href="{% url 'home_orderconfirm' %}?cartids="+res
            // location.href="{% url 'home_orderconfirm' %}?cartids="+cartids
            
        })




        // +　单击事件
        $(".add").click(function(){
        // 获取数字框
        var t=$(this).parent().find('input[class*=text_box]');
        // 数字框＋１
        t.val(parseInt(t.val())+1)
        changenum(t)
         })
        // －单击事件
        $(".min").click(function(){
        // 获取数字框
        var t=$(this).parent().find('input[class*=text_box]');
        // 数字框－１
        t.val(parseInt(t.val())-1)
        // 如果数字框＜０
        if(parseInt(t.val())<=0){
        // 那么重新赋值０
        t.val(1);
        }
        changenum(t)
        })

        // 计算总金额的函数
        function changenum(t){
            // 获取数字框的值
            var newnum = Number(t.val())
            // 获取商品的id号
            var cartid = t.attr('cartid')
            // 因为数字框里面可以修改值,所以当里面的值小于１时，就不执行计算
            if (newnum<1){
                return ;
            }
            // 如果值大于１,发送ajax请求,将修改后的商品数据重新存入数据库
            $.get('{% url 'home_shopcartedit'%}',{'cartid':cartid,'num':newnum},function(data){
                // alert(data.msg)
                // 修改总金额
                t.parents('ul').find('.J_ItemSum').text(data.totalprice)
                Allgoodsandprice()
            },'json')
        }


        // 自己修改数字框之后的金额总数　失去焦点事件
        $('.cartgoodsnum').blur(function(){
            // 调用计算总金额的函数
            changenum($(this))
        })

        // 给多选框绑定单击事件
        $('.check[name!=select-all]').click(function(){
            Allgoodsandprice()
        })

        // 计算选择的所有的商品总数和商品价格
        function Allgoodsandprice(){
            // 先初始化选中的所有的商品总数和总价
            var totalnums = 0
            var totalprices = 0
            var cartids = []
            // 循环获取页面中所有的多选框，除了全选框
            $('.check[name!=select-all]').each(function(){
                // 选中多选框值就是true
                var res = $(this).prop('checked')
                if(res){
                    // 选中当前的单选框　统计商品总价和总数
                    totalprices += Number($(this).parents('ul').find('.J_ItemSum').text())
                    totalnums += Number($(this).parents('ul').find('.cartgoodsnum').val())
                    cartids.push($(this).val())
                }
            })
            // console.log(totalprices,totalnums)
            $('#J_SelectedItemsCount').text(totalnums)
            $('#J_Total').text(totalprices.toFixed(2))
            return cartids

        }

        // 给全选框绑定单击事件
        $('#J_SelectAllCbx2').click(function(){
            // 选中全选框为true 多选框也选中
            $('.check').prop('checked',$(this).prop('checked'))

            // 调用计算函数
            Allgoodsandprice()
        })


        // 执行商品删除
        $('.delete').click(function(){
            var cateid = $(this).attr('cateid')
            // console.log(cateid)
            var u = $(this)
            $.get('{% url "home_shopcartdel" %}',{'cateid':cateid},function(data){
                if(data['error']==0){
                    u.parents('ul').remove()
                }
                alert(data.msg)
            },'json')
        })


        // 删除全部的商品
        // 给商品的全部删除按钮添加单击事件
        $('.deleteAll').click(function(){
            // var u = $(this)
            // 定义一个空的字符串添加购物车商品的id
            var arrs = ''
            // 循环遍历每一个多选框
            $('.check[name!=select-all]').each(function(){
                // 判断是否选中 
                res = $(this).prop('checked');
                // 如果多选框被选中 
                if (res==true){
                    // 获取选中的购物车的商品id
                    cateid = $(this).attr('cateid')
                    // 就将购物车的商品id相加
                    arrs += cateid+','
                }
            })
            // 发送ajax请求,并将选中的全部商品id发送到指定路由，删除对应的商品
            $.get('{% url 'home_shopcartdels' %}',{'arrs':arrs},function(data){
                // 手动删除购物车的商品
                if(data['error']==0){
                    // 遍历每一个多选框
                    $('.check[name!=select-all]').each(function(){
                        var u = $(this)
                        // 如果该多选框是选中的
                        res = $(this).prop('checked'); 
                        if(res==true) {
                            var n = 0
                            // 删除其父元素　即整个商品
                            u.parents('ul').remove()
                            $('.float-bar-right').find('#J_SelectedItemsCount').text(0)
                            $('.float-bar-right').find('#J_Total').text(n.toFixed(2))
                        }
                    })
                }
                alert(data['msg'])
            },'json')

        })
          
    })
</script>


{% endblock %}